﻿<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>人员管理</el-breadcrumb-item>
            <el-breadcrumb-item>钉钉列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form class="demo-form-inline" :model="SelAttendanceDD" label-width="140px">
            <el-row  :gutter="5">
                <el-col :span="3">
                    <el-select v-model="SelAttendanceDD.DD_number" filterable required placeholder="考勤人">
                        <el-option value="-1" label="请选择请款人">考勤人</el-option>
                        <el-option v-for="(v,k) in AllUsers" :value="v.DD_number" :label="v.UserName" v-text="v.UserName" />
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="SelAttendanceDD.DepartmentId" required placeholder="部门">
                        <el-option value="0" label="请选择部门">请选择部门</el-option>
                        <el-option v-for="(v,k) in AllDepartment" :value="v.Id" :data-userid="v.Id" :label="v.DepartmentName" v-text="v.DepartmentName" />
                    </el-select>
                </el-col>

                <el-col :span="2.5">
                    <el-date-picker v-model="SelAttendanceDD.starttime"
                                    style="width:100%"
                                    type="date"
                                    placeholder="开始时间">
                    </el-date-picker>
                </el-col>
                <el-col :span="2.5">
                    <el-date-picker v-model="SelAttendanceDD.endtime"
                                    style="width:100%"
                                    type="date"
                                    placeholder="结束时间">
                    </el-date-picker>
                </el-col>

                <el-col :span="1"  >
                    <el-button  style="width:100%" icon="el-icon-search" @click="GettableDB()"> </el-button>
                </el-col>
                <el-col :span="1.5" >
                    <el-button  
                                style="width:100%"
                               type="warning"
                                icon="el-icon-refresh"
  @click="GetAttendanceDetailOne()">补漏数据</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding-top: 10px">
            <el-col>
                <el-table :data="tableData"
                          style="width: 100%"
                          border>
                    <el-table-column header-align="center" fixed type="index" label="序号" width="50" align="center" :index="_indexMethod"></el-table-column>
                    <el-table-column header-align="center" fixed prop="UserName" label="姓名" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <!--<el-table-column header-align="center" fixed prop="number_DD" label="人员编号" align="center" :show-overflow-tooltip="true"></el-table-column>-->
                    <el-table-column header-align="center" prop="todaytime" label="记录时间" width="160" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{scope.row.todaytime.split(' ')[0]}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="onclicktime" label="上班打卡时间" width="160" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="onclickaddress" label="上班打卡位置" width="200" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="downclicktime" label="下班打卡时间" width="160" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column header-align="center" prop="downclickaddress" label="下班打卡位置" width="200" align="center" :show-overflow-tooltip="true">   </el-table-column>
                    <el-table-column header-align="center" prop="late" label="迟到" align="center">
                        <template slot-scope="scope">
                            <label v-if="scope.row.late">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="latetime" label="迟到时间" align="center">
                        <template slot-scope="scope">
                            {{timelatetimedif(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="Leaveearly" label="早退" align="center">
                        <template slot-scope="scope">
                            <label v-if="scope.row.Leaveearly">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="Leaveearlytime" label="早退时间" align="center">
                        <template slot-scope="scope">
                            {{timeleaveearlytimedif(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="LackOfCards" label="缺卡" align="center">
                        <template slot-scope="scope">
                            <label v-if="scope.row.LackOfCards">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="Absenteeism" label="旷工" align="center">
                        <template slot-scope="scope">
                            <label v-if="scope.row.Absenteeism">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="leaved" label="请假" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <label v-if="scope.row.leaved">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="leavetype" label="请假类型" align="center">
                        <template slot-scope="scope">
                            {{leavetypefc(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="leavedday" label="请假天数" align="center">
                        <template slot-scope="scope">
                            <label v-if="scope.row.leavedday!=''">{{scope.row.leavedday}}天</label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="businesstravel" label="出差" align="center" width="200" :show-overflow-tooltip="true">   </el-table-column>
                    <el-table-column header-align="center" prop="businesstravelday" label="出差天数" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <label v-if="scope.row.businesstravelday!=''">{{scope.row.businesstravelday}}天</label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="addwork" label="加班" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <label v-if="scope.row.addwork">√</label>
                            <label v-else></label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="addworktime" label="加班时间" align="center">
                        <template slot-scope="scope">
                            {{addtime(scope.row.addworktime)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="addworktype" label="加班类型" align="center">
                        <template slot-scope="scope">
                            {{addworktypefc(scope.row)}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="UserPosition" label="编辑" align="center" maxWidth='200'>
                        <template slot-scope="scope">
                            <el-button type="primary" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block" style="float: right">
                    <el-pagination @size-change="GettableDB"
                                   @current-change="GettableDB"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>


        <el-dialog :visible.sync="UpAttendanceDDShow" title="修改记录" width="70%">
            <UpAttendanceDD :UpAttendanceDB="UpAttendanceDB"></UpAttendanceDD>
        </el-dialog>


    </div>

</template>

<script>
    import UpAttendanceDD from "./UpAttendanceDD";
    import * as publicjs from "/public/Scriput/Public"
    export default {
        components: {
            UpAttendanceDD,
        },
        name: "AttendanceDD",
        data() {
            return {
                SelName: "",
                UpAttendanceDDShow: false,
                SelAttendanceDD: {
                    DD_number: '-1',
                    DepartmentId: '',
                    starttime: '',
                    endtime: '',
                },

                AllUsers: [],
                AllDepartment: [],
                //表格数据信息
                tableData: [],
                //修改组织信息
                UpAttendanceDB: {},
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [15, 50, 100,],
                    pagesize: 15,
                    total: 0
                },
            };
        },
        created() {
            this.AllDepartment = publicjs.GetAllDepartment(this.$http);
            this.AllUsers = publicjs.GetCompanyAllUsers(this.$http);
            this.GettableDB();
        },
        methods: {
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            GettableDB() {
                let  loading=this.openLoading()
                this.$http.post("/UserInfo/AttendanceDD_Data", {
                    SelAttendanceDD: this.SelAttendanceDD, offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(x => {
                    loading.close()
                    this.tableData = x.data.data;
                    this.pagination.total = x.data.count;

                })
            },
            edit(obj) {
                this.UpAttendanceDDShow = true;
                this.UpAttendanceDB = JSON.parse(JSON.stringify(obj));
                console.log(this.UpAttendanceDB);
            },
            addworktypefc(d) {

                if (d.addwork) {
                    var typename = "";
                    switch (d.addworktype) {
                        case "0":
                            typename += "工作日";
                            break;
                        case "1":
                            typename += "休息日";
                            break;
                        case "2":
                            typename += "节假日";
                            break;
                    }
                    return typename;
                }
                else {
                    return "";
                }
            },
            leavetypefc(d) {
                var name = "";
                switch (d.leavetype) {
                    case 1:
                        name += '事假'
                        break;
                    case 2:
                        name += '病假'
                        break;
                    case 3:
                        name += '年假'
                        break;
                    case 4:
                        name += '婚假'
                        break;
                    case 5:
                        name += '生育假'
                        break;
                    case 6:
                        name += '陪产假'
                        break;
                    case 7:
                        name += '丧假'
                        break;
                    case 8:
                        name += '工伤假'
                        break;
                }
                return name;
            },

            //计算时间差值
            timedifference(time) {
                var difftime = "";
                if (time != null && time != "" && time != "0") {
                    //var day = Math.floor(time / 86400000 );
                    //var hour = Math.floor(time / 1000 / 3600);
                    var minute = Math.floor((time * 1) / 1000 / 60);
                    //var second = Math.floor(time / 1000 );
                    difftime += minute + "分钟";
                }
                return difftime;
            },
            //加班时间
            addtime(time) {
                var restime = "";
                if (time != null && time != "") {
                    restime += time.replace("加班时长", "");
                    return restime;
                }
                return restime;
            },
            //迟到时间
            timelatetimedif(d) {
                var regExp = new RegExp('.*[\u4E00-\u9FA5]+.*');
                if (regExp.test(d.latetime)) {
                    return d.latetime
                }
                else {
                    return this.timedifference(d.latetime);
                }
            },
            ///早退时间
            timeleaveearlytimedif(d) {
                var regExp = new RegExp('.*[\u4E00-\u9FA5]+.*');
                if (regExp.test(d.latetime)) {
                    return d.leaveearlytime
                }
                else {
                    return this.timedifference(d.leaveearlytime);
                }
            },

            //查询补漏数据
            GetAttendanceDetailOne() {
                if (this.SelAttendanceDD.starttime == null) {
                    this.$message.success("请选择开始时间!")
                } else {
                    let loadding = this.openLoading()
                    this.$http.post('/UserInfo/DayData_DD', { datetime: this.SelAttendanceDD.starttime }).then((res) => {
                       loadding.close();
                        if (res.data.result) {
                            this.$message.success("补漏考情成功!")
                        } else {
                            this.$message.error("获取考情失败,请重试!")
                        }
                    })
                }
            },
        },
    }
</script>

<style scoped>
    el-col {
        padding-left: 10px;
    }
</style>